<template>
	<div class="gender">
		<div class="head">
			<router-link tag="div" to="/personal" class="rou"><</router-link>
			<div class="zl">性别</div>
		</div>
		<div class="con">
			<div :class="{ actives: isActive }" @click="demo">男</div>
			<div :class="{ activess: isActives }" @click="demos">女</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:"gender",
		data(){
			return{
				isActive:true,
				isActives:false
			}
		},
		methods:{
			demo(){
				this.isActive = !this.isActive;
				this.isActives = !this.isActives
			},
			demos(){
				this.isActive = !this.isActive;
				this.isActives = !this.isActives
			}
		}
	}
</script>

<style lang="less">
	.gender{
		.head{
			background: #3AAE95;
			overflow: hidden;
			height: 50/50rem;
			line-height: 50/50rem;
			div{
				float: left;
				font-size: 20/50rem;
				color:#fff;
			}
			.rou{
				margin-left: 10/50rem;
			}
			.zl{
				margin-left: 160/50rem;
			}
			.sx{
				margin-left: 100/50rem;
			}
		}
		.con{
			margin-top: 10/50rem;
			.actives{
				color:red;
			}
			.activess{
				color:red;
			}
			div{
				widows: 100%;
				height: 50/50rem;
				line-height: 50/50rem;
				background: #fff;
				border-bottom: 2/50rem solid #F2F2F2;
				padding-left: 30/50rem;
				font-size: 16/50rem;
			}
		}
	}
	
</style>